<template>
  <div class='main'>
      <!--面包屑-->
      <div class='top'>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>项目群</el-breadcrumb-item>
          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>区域列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div>
        <el-card class='card'>
          <!--标题文字-->
          <div class='headerTitle'>
              <div>区域列表</div>
          </div>

          <div class='search'>
            <el-input
              v-model="input"
              placeholder="请输入区域名称搜索"
              :suffix-icon="Search"
              style="width:300px"
            />
            <el-button class='addbtn' @click="handleAdd">新建区域</el-button>
          </div>

          <div class='table' style='padding:0 20px'>
            <el-table :data="tableData" border :header-cell-style="{background:'#b4c7e7',color:'black',fontSize:'12px',fontWeight:'500'}">

              <el-table-column prop="1" label="区域名称" align="center" width="370px" />

              <el-table-column prop="2" label="离地距离" align="center" width="370px" />

              <el-table-column prop="3" label="区域图片" align="center" width="500px" />

              <el-table-column label="操作" align="center">
                <template v-slot='scope'>
                    <span class='edit' @click="handleEdit(scope.row)">编辑</span>
                    <span class='dell' @click="handleDell(scope.row.id)">删除</span>
                </template>
              </el-table-column>

            </el-table>
          </div>

          <div>
            <el-dialog
              v-model="addVisible"
              title="新建区域"
              width="30%"
              :before-close="handleClose"
            >
              <el-divider class='line' />

              <el-form>

                <el-form-item label="区域名称" class='lineheight'>
                  <el-input v-model="form.name" placeholder="请输入产品名称"/>
                </el-form-item>

                 <el-form-item label="离地距离" class='lineheight'>
                  <el-input v-model="form.distance" placeholder="请输入型号" />
                </el-form-item>

               

                <el-form-item label="区域图片" class='lineheight'>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    >
                    <div class='upload'>
                
                        <el-button icon='Upload'>上传图片</el-button>
                    </div>


                  </el-upload>
                </el-form-item>

                 

                
              <el-divider class='ment'/>

              </el-form>
              
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="addVisible = false" class='cancle'>取消</el-button>
                  <el-button type="primary" @click="addVisible = false" class='save'
                    >保存</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>

          <div>
            <el-dialog
              v-model="editVisible"
              title="编辑区域"
              width="30%"
              :before-close="handleClose"
            >
              <el-divider class='line' />

              <el-form>

                <el-form-item label="区域名称" class='lineheight'>
                  <el-input v-model="upform.name" placeholder="请输入产品名称"/>
                </el-form-item>

                 <el-form-item label="离地距离" class='lineheight'>
                  <el-input v-model="upform.model" placeholder="请输入型号" />
                </el-form-item>

               

                <el-form-item label="区域图片" class='lineheight'>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    >
                    <div class='upload'>
                
                        <el-button icon='Upload'>上传图片</el-button>
                    </div>


                  </el-upload>
                </el-form-item>
              <el-divider class='ment'/>

              </el-form>
              
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="editVisible = false" class='cancle'>取消</el-button>
                  <el-button type="primary" @click="editVisible = false" class='save'
                    >保存</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>

          <div class='page'>
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="prev, pager, next, jumper"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
  </div>
</template>

<script setup>
import { reactive , ref} from 'vue'
import { Search } from '@element-plus/icons-vue'

const input = ref('')

const currentPage = ref(5)

const pageSize = ref(100)

const addVisible = ref(false)

const editVisible = ref(false)

const tableData = reactive([
  {
    1:'',
    2:'',
    3:''
  },
    {
    1:'',
    2:'',
    3:''
  },
    {
    1:'',
    2:'',
    3:''
  }
])

const form = reactive({
    name:'',
    distance:''

})

const upform= reactive({
    name:'',
    distance:''
})

const handleAdd = () =>{
    addVisible.value=true
}

const handleDell = (e) =>{
  console.log(e);
}


const handleEdit = (e) =>{
    editVisible.value=true
    console.log(e);
    upform.name = e[1]
    upform.model = e[3]
    upform.pro_type = e[4]
    upform.node_type = e[5]
    upform.vender = e[6]
    upform.commun = e[7]
    upform.deal = e[8]
    upform.number = e[9]
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="less">
.main{
  height:100%;
  background-color:#eaf2fa;
  overflow: hidden;
}

.top{
  margin-left: 30px;
  margin-top: 5px;
}

.card{
  width:1480px;
  height: 550px;
  margin-top: 15px;
}
.card  :deep(.el-card__body){
    padding:0 !important;
  } 

:deep(.el-form-item__label){
    white-space:pre-line;
}

.edit{
  margin-right: 30px;
  font-size: 13px;
  color:#606fa6;
  cursor: pointer;
}

.dell{
  font-size: 13px;
  color:#fccb56;
  cursor: pointer;
}

.search{
  display:flex;
  padding:0 20px;
  justify-content: flex-end;
  margin-top:20px;
}

.addbtn{
  width:100px;
  height:30px;
  color:white;
  background-color: #8faadc;
  margin-left: 20px;
}

.table{
  margin-top: 15px;
}

.el-dialog__title{
  color:#636ea6;
  letter-spacing: 1px;
}

.line{
  position: absolute;
  top: 40px;
  left: 0px;
}

.el-form-item__label{
    white-space:pre-line;
}


.ment{
  position: absolute;
  top: 190px;
  left: 0px;
}

.lineheight{
  height:20px
}

.page{
  margin-left: 950px;
  margin-top: 10px;
}

:deep(.el-dialog__title) {
  color:#7b6ea5;
  letter-spacing: 1px;
}

.cancle{
  background-color:#cccccc;
  color: white;
  width: 100px;
}

.save{
  background-color:#8faadc;
  color: white;
  width: 100px;
}

</style>
